<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>



<div id="msg"></div>
<script>
  var a = document.querySelectorAll('.r-navbar li')
  var b = document.querySelectorAll('.r-contents li')
  for (var i = 0; i < a.length; i++) {
    (function (x) {
      var listener = function () {
        console.log(x)
        // 1.先隐藏其他已经显示的内容
        for(var j = 0; j < b.length; j++){
          if(x !== j ){
            b[j].style.display="none"
          }
        }
        // 2.显示当前的内容
        b[x].style.display="block"
      }
      a[x].addEventListener('click', listener)
    })(i)
  }
  //  清除全部的class
  //  显示点击的class

  function remove() {

    for (var i = 0; i < b.length; i++) {

      b[i].classList.remove('active')

//    js 删除类

      console.log(i)

    }

  }

  for (var i = 0; i < b.length; i++) {

    let c = i

    a[i].addEventListener('click', function () {

      remove()

      b[c].classList.add('active')

    })

  }
</script>


</body>
</html>